<template>
	<u-popup v-model="showCouponModal" @close="closeModal" mode="bottom" :closeable="true" border-radius="14">
		<scroll-view scroll-y="true" class="coupon">
			<view class="content u-m-b-20" v-for="item in couponList" :key="item.id">
				<view class="left">
					<view class="sum">
						￥
						<text class="num">{{item.amount}}</text>
					</view>
					<view class="type">{{item.couponType ==='FULL_REDUCTION'?'满减券':'现金券'}}</view>
					<view class="type">{{getRangeType}}</view>
				</view>
				<view class="centre">
					<view class="title">{{item.couponName }}</view>
					<view class="u-type-info">{{item.rangeDesc }}</view>
					<view class="valid-date">过期时间：{{dayjs(item.expireTime).format("YYYY-MM-DD")}}</view>
				</view>
				<view class="right">
					<block v-if="item.couponStatus===1">
					<u-tag text="已领取" type="success"></u-tag>
					</block>
					<block v-else-if="item.couponStatus===2">
					<u-tag text="已使用" type="info"></u-tag>
					</block>
					<block v-else>
						<!-- 这里绑定事件会出现一定的问题@click="receiveCoupon(item.id)" -->
					<view size="mini" class="immediate-use" :round="true" >领取</view>
					</block>
					
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	// 局部导入dayjs
	import dayjs from 'dayjs'
	export default {
		name: "coupon",
		props: ["showCouponList", "couponList"],
		data() {
			return {

			};
		},
		computed: {
			// 获取使用券的范围
			getRangeType() {
				return function(rangeType) {
					switch (rangeType) {
						case 'ALL':
							return '全场通用';
						case 'SKU':
							return '指定商品';
						case 'CATEGORY':
							return '指定分类';

					}
				}
			},
			//动态绑定显示变量
			showCouponModal:{
				get(){
					return this.showCouponList
				},
				set(value){
					return false
				}
			},
			//领取优惠券
			/* receiveCoupon(id){
				this.$emit("getCouponInfo",id)
				console.log(id);
			} */
			
		},
		methods:{
			dayjs,
			//关闭模态框
			closeModal(){
				this.$emit("update:showCouponList",false)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.coupon {
		margin: 80rpx auto;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		width: 700rpx;
		color: $u-type-warning;
		font-size: 28rpx;
		height: calc(100vh - 220rpx);

		.content {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 40rpx 20rpx;
			border: 10rpx;
			background-color: #fff5f4;

			.left {
				.sum {
					font-size: 32rpx;

					.num {
						font-size: 60rpx;
						font-weight: bold;
					}
				}
			}

			.centre {
				margin-left: 40rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: $u-main-color;
				}
			}

			.right {
				margin-left: 30rpx;

				.immediate-use {
					padding: 0 20rpx;
					height: 50rpx;
					border-radius: 25rpx;
					line-height: 50rpx;
					background-color: $u-type-warning !important;
					color: #ffffff !important;
					font-size: 24rpx;
					border: none;
					word-break: keep-all;
				}
			}
		}
	}
</style>
